<template>
  <div class="params">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <el-cascader
      change-on-select
      :options="options"
      label="父类名称"
      :props="defaultProps"
      v-model="selectedOptions"
      @change="handleChange"
    ></el-cascader>-->
    <el-steps :active="active" finish-status="success">
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
    </el-steps>
    <el-tabs :tab-position="tabPosition" style="height: auto;" @tab-click="handleClick">
      <el-tab-pane label="基本信息">基本信息</el-tab-pane>
      <el-tab-pane label="商品参数">商品参数</el-tab-pane>
      <el-tab-pane label="商品属性">商品属性</el-tab-pane>
      <el-tab-pane label="商品图片">
        <!-- 由于组件自带的上传功能不会被axios拦截器拦截，所以要通过组件自带的属性附带请求头，要不然会上传失败 -->
        <el-upload
          class="upload-demo"
          action="http://localhost:8888/api/private/v1/upload"
          :headers="myheaders"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="商品内容">商品内容</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 0,
      tabPosition: 'left',
      options: [],
      defaultProps: [],
      selectedOptions: '',
      myheaders: {
        Authorization: localStorage.getItem('token')
      },
      fileList: []
    }
  },
  methods: {
    handleClick (obj) {
      console.log(obj)
      this.active = parseInt(obj.index)
    },
    handleChange () {
      console.log('先不写')
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleSuccess (res, file, fileList) {
      console.log(res)
      if (res.meta.status === 200) {
        this.$message.success(res.meta.msg)
      } else {
        this.$message.error(res.meta.msg)
      }
    },
    beforeUpload (file) {
      console.log(file)
      if (file.size >= 500 * 1024) {
        this.$message.error('文件大小不能超过500kb')
        return false
      }
    }
  }
}
</script>
